<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3 id="textID">{{ msg }}</h3>
        <input type="button" @click="showMsg" value="戳我">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '学而时习之，不亦说乎？'
            },
            methods: {
                showMsg() {
                    this.msg = "学习到了就马上去实践，这难道不是一件很快乐的事情吗？"
                },
                show() {
                    console.log('show 一下');
                }
            },
            beforeCreate() {
                /*
                第一个生命周期函数
                Vue 实例还没有 初始化完成 
                data 属性 和 methods属性 还没有创建是 调用 beforeCreate这个方法
                */
                // const text = document.getElementById('textID').innerText
                // console.log(text); {{ msg }}
                // this.show()    this.show is not a function
            },
            created() {
                /*
                第二个生命周期方法
                Vue 实例还没有 初始化完成
                data 属性 和 methods属性 已经创建当时 数据还没有 渲染到 HTML 视图上
                方法也没有绑定到 视图上
                */
                // const text = document.getElementById('textID').innerText
                // console.log('HTML视图中的值：', text);
                // console.log('this.msg:',this.msg);
                // this.show()
            },
            /*
                先去查找 对应的 HTML节点 设置 el对应的 HTML节点，
                去寻找 设置的模板引擎
                在进行 界面 渲染
            */
            beforeMount() {
                /*
                第三个生命周期方法 
                即将 把 data属性上的数据 和 methods属性里面的方法 设置和绑定到 HTML 元素界面上
                */
                // const text = document.getElementById('textID').innerText
                // console.log('HTML视图中的值：', text);
                // console.log('this.msg:',this.msg);
                // this.show()
            },
            mounted() {
                /*
                第四个生命周期方法
                已经  把 data属性上的数据 和 methods属性里面的方法 设置和绑定到 HTML 元素界面上
                */
                // const text = document.getElementById('textID').innerText
                // console.log('HTML视图中的值：', text);
                // console.log('this.msg:',this.msg);
                // this.show()
            },
            beforeUpdate() {
                /*
                第五个生命周期函数
                当数据 data属性中的数据 即将渲染 HTML 元素对象内容
                */
                console.log('beforeUpdate');
                const text = document.getElementById('textID').innerText
                console.log('HTML视图中的值：', text);
                console.log('this.msg:', this.msg);
                this.show()
                console.log('-------------------------------------------------------------');
                
            },
            updated() {
                /*
                第六个生命周期函数
                当数据 data属性中的数据 已经渲染 HTML 元素对象内容
                */
                console.log('updated');
                const text = document.getElementById('textID').innerText
                console.log('HTML视图中的值：', text);
                console.log('this.msg:', this.msg);
                this.show()
            },
            beforeDestroy() {
                // 实例销毁之前调用。在这一步，实例仍然完全可用。
            },
            destroyed() {
                // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
            }
        })
    </script>
</body>

</html>